/* --------------------------- 定义变量与引入插件 -------------------------- */
var head = document.querySelector("header");
// const URL = "http://localhost:3000/abc";
// const URL = "http://xuejiang.free.idcfengye.com/abc";
const URL = "	http://xuesang.vipgz1.91tunnel.com/abc";

// 引用模块 (水纹)
import {waterRipple} from "../../../resources/waterRipple/waterRipple.js";
let waterRipples = null;

// 引入模块 (渐变)
import {trichromaticGradient} from "../../../resources/gradation/gradation.js";
trichromaticGradient(head, 50, "to right,", 0, 150, { 
  rgb1: [0, 108, 145],
  rgb2: [0, 108, 145],
  rgb3: [0, 108, 145],
});

// 引入模块 (AJAX)
import {funt} from "./ajax.js";
funt("post", URL, setbackgroundColor);
/* --------------------------- 定义变量与引入插件 -------------------------- */ 

// 头部不跟随滚动条滚动
function headRolling(Y) {    
  head.style.top = Y+"px";  
}

// 类别盒子显示与隐藏
function categoryBox() {  
  let lis = head.querySelector("#HeadMain").querySelector("ul").querySelectorAll("li")[1];
  let HeadMainBox = head.querySelector("#HeadMain").querySelector(".HeadMainBox");
  let spans = HeadMainBox.querySelectorAll("span");
  let ShutDown = HeadMainBox.querySelector(".HeadMainBoxShutDown").querySelector("span");
  let t = false;

  // 鼠标点击 显示与隐藏
  lis.onclick = function() {    
    if(t = !t) {
      HeadMainBox.className = "HeadMainBox";
      HeadMainBox.className = "HeadMainBox HeadMainBoxAccording";
    }else {
      HeadMainBox.className = "HeadMainBox";
      HeadMainBox.className = "HeadMainBox HeadMainBoxHidden";
    }    
  }
  // 内置关闭按键
  ShutDown.onclick = function() {        
    t = false;
    HeadMainBox.className = "HeadMainBox";
    HeadMainBox.className = "HeadMainBox HeadMainBoxHidden";    
  }
  
  // 绑定事件
  for(let i = 0; i < spans.length-1; i++) {    
    spans[i].onclick = function() {
      console.log(this);
    }    
  }
}

// 按钮收起与展开
function setSwitch() { 
  // 齿轮
  var gearSet = head.querySelector("#Set").querySelector("span");  
  // 设置框
  var SetAttribute = head.querySelector("#Set").querySelector(".SetAttribute");
  // 关闭按钮
  var SetShutDown = head.querySelector("#Set").querySelector(".SetAttribute").querySelector(".SetShutDown").querySelector("span");

  // 开启设置框与齿轮正向旋转与关闭反方向旋转
  let i = false;
  gearSet.onclick = function() {
    if(i = !i) {
      // 正方向旋转
      gearSet.className = "iconfont gearForward";       
      // 设置框弹出
      SetAttribute.className = "SetAttribute SetAttributeShow";
      // 关闭按钮正方向移动
      SetShutDown.className = "iconfont closeRight";
    }else {
      // 设置框隐藏
      SetAttribute.className = "SetAttribute SetAttributeHidden";
      // 反方向旋转
      gearSet.className = "iconfont gearReverse"; 
      // 关闭按钮反方向移动
      SetShutDown.className = "iconfont closeLeft";
    }
    
  }

  // 关闭设置框与齿轮反向旋转
  SetShutDown.onclick = function() {
    // 设置框隐藏
    SetAttribute.className = "SetAttribute SetAttributeHidden";
    // 反方向旋转
    gearSet.className = "iconfont gearReverse"; 
    // 关闭按钮反方向移动
    SetShutDown.className = "iconfont closeLeft";

    i = false; 
  }
}
// 颜色背景
function setbackgroundColor(value) {  
  // 背景颜色选择框
  var backgroundColor = head.querySelector("#Set").querySelector(".SetAttribute").querySelector(".backgroundColor").querySelectorAll("ul");
  // 赋值AJAX返回的数据
  let backgroundColorArray = value.backgroundColorArray;
  let valueColor = value.defaultValue;
  // 添加到body (初始化) 添加到main (初始化)
  document.body.id = valueColor;  
  document.querySelector("main").id = valueColor;

  
  // 设置框背景颜色控制
  for(let i = 0; i < backgroundColor.length; i++) {  
    // 获取每一排的li
    let lis = backgroundColor[i].querySelectorAll("li");
    
    // 添加id颜色属性
    for(let j = 0; j < lis.length; j++){
      lis[j].onclick = function(){
        funt("post", URL, fun, `backgroundColorArray=${backgroundColorArray[i+""][j]}`);
        
        function fun(value) {
          valueColor = value.defaultValue;
          // 添加到body
          document.body.id = valueColor;
          // 添加到main
          document.querySelector("main").id = valueColor;
        }        
        
      }
    }
  }

}
// 水纹展示
function setWaterWave() {
  var inputs = head.querySelector("#Set").querySelector(".SetAttribute").querySelector(".SetChoose").getElementsByTagName("input");    
/* ------------------------------------------------------------ */
  // 如果本地数据被清除可以自动添加默认值 (水波)
  let va = 0;
  for(const key in localStorage) {    
    if(key == inputs[1].name) {      
      va++;

      break;
    }
  }
  if(va === 0) {
    window.localStorage.setItem(inputs[0].name, false);
    window.localStorage.setItem(inputs[1].name, true);
    window.localStorage.setItem("TransparencyValue", 0);
    window.localStorage.setItem("slippingArticlePX", "53px");
    window.localStorage.setItem("corrugatedColor", [0, 0, 0]);


    for(let i = 0; i < 2; i++) {      
      if(window.localStorage[inputs[i].name] === "true") {
        inputs[i].checked = true;
      }
    }
    
  }else {
    for(let i = 0; i < 2; i++) {   
      // console.log(window.localStorage[inputs[i].name])   
      if(window.localStorage[inputs[i].name] === "true") {        
        inputs[i].checked = true;                 
      }else {                  
        waterRipples = null;          
      }
    }
    
    // 添加水波纹
    if(inputs[0].checked === true) {
      waterRipples = waterRipple;
      // 透明度赋值
      waterRipples(window.localStorage.getItem("corrugatedColor").split(","), window.localStorage.getItem("TransparencyValue"), true);
    }else if(inputs[0].checked === false) {
      waterRipples = waterRipple;
      waterRipples(undefined, undefined, false);          
      waterRipples = null;
    }

    // 将滚动条距离赋值给元素
    let slippingButton = head.querySelector("#Set").querySelector(".SetAttribute").querySelector(".SetChoose").querySelector(".slippingVisibility").querySelector(".slippingButton");;  
    slippingButton.style.left = window.localStorage.getItem("slippingArticlePX");
  }
/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
  // 开启波纹 结束波纹
  for(let i = 0; i < inputs.length; i++) {        
    inputs[i].onclick = function() {
      // 添加选择的复选框
      window.localStorage.setItem(inputs[0].name, false);
      window.localStorage.setItem(inputs[1].name, false);
      window.localStorage.setItem(inputs[i].name, inputs[i].checked);
      
      // 判断只有一个复选框选择
      for(let i = 0; i < 2; i++) {      
        if(window.localStorage[inputs[i].name] === "true") {
          inputs[i].checked = true;         
        }else {
          inputs[i].checked = false;          
        }
      }

      // 添加水波纹
      if(inputs[0].checked === true) {
        waterRipples = waterRipple;
        waterRipples(window.localStorage.getItem("corrugatedColor").split(","), window.localStorage.getItem("TransparencyValue")-0, true);
      }else if(inputs[0].checked === false) {
        waterRipples = waterRipple;
        waterRipples(undefined, undefined, false);          
        waterRipples = null;
      }      
    }
  }
/* ------------------------------------------------------------ */
/* ---------------------------------------------------------------------- */
    // 透明度条
    let Set = head.querySelector("#Set");
    let slippingVisibility = head.querySelector("#Set").querySelector(".SetAttribute").querySelector(".SetChoose").querySelector(".slippingVisibility");  
    let slippingArticle = slippingVisibility.querySelector(".slippingArticle");
    let slippingButton = slippingVisibility.querySelector(".slippingButton");

    // 进度条拖动，内容跟着运动事件
    slippingButton.onmousedown = function(event){          
      var disY =event.clientX - slippingButton.offsetLeft;
         
        document.onmousemove =function (event){ 
          if((event.clientX >= Set.offsetLeft - 90 + slippingArticle.offsetLeft) && (event.clientX <= Set.offsetLeft - 102 + slippingArticle.offsetLeft + slippingArticle.offsetWidth)) {

            var t = event.clientX -disY;					                                
              slippingButton.style.left =t+'px';                          
              // 透明度值
              window.localStorage.setItem("TransparencyValue", (slippingButton.offsetLeft - 54) * 0.01);                        
              // 确定移动距离
              window.localStorage.setItem("slippingArticlePX", (t+"px"));
              
              if(inputs[0].checked === true) {
                waterRipples = waterRipple;
                waterRipples(window.localStorage.getItem("corrugatedColor").split(","), window.localStorage.getItem("TransparencyValue")-0, true);
              }
          };

            document.onmouseup = function (){
              this.onmousemove = null;
              this.onmouseup = null;
            };
        }           						
          

      return true;
    };    
    // 点击进度条，开启定时器，小球做匀速运动到达后，清楚定时器
    slippingArticle.onmousedown = function(event){        					                    
      var divY =event.clientX - (Set.offsetLeft - 85);      
      var timer =null;
      var speed=10;          

      clearInterval(timer);
      timer = setInterval(function(){            
        if(slippingButton.offsetLeft <= divY) {
          // 移动
          slippingButton.style.left = (slippingButton.offsetLeft + speed)+"px";
          
          // 添加波纹
          window.localStorage.setItem("TransparencyValue", (slippingButton.offsetLeft - 54) * 0.01);
          if(inputs[0].checked === true) {
            waterRipples = waterRipple;
            waterRipples(window.localStorage.getItem("corrugatedColor").split(","), window.localStorage.getItem("TransparencyValue")-0, true);
          }

          // 确定移动距离
          window.localStorage.setItem("slippingArticlePX", slippingButton.style.left);

          if(slippingButton.offsetLeft >= divY) {
            clearInterval(timer);
          }              
        }else if(slippingButton.offsetLeft >= divY){
          // 移动
          slippingButton.style.left = (slippingButton.offsetLeft - speed)+"px";
          
          // 透明度值
          window.localStorage.setItem("TransparencyValue", (slippingButton.offsetLeft - 54) * 0.01);
          // 添加波纹
          window.localStorage.setItem("TransparencyValue", (slippingButton.offsetLeft - 54) * 0.01);
          if(inputs[0].checked === true) {
            waterRipples = waterRipple;
            waterRipples(window.localStorage.getItem("corrugatedColor").split(","), window.localStorage.getItem("TransparencyValue")-0, true);
          }
          
          // 确定移动距离
          window.localStorage.setItem("slippingArticlePX", slippingButton.style.left);
        }
        
      },10);
      
    }
    
    
    // 波纹颜色变化
    let slippingColor = head.querySelector("#Set").querySelector(".SetAttribute").querySelector(".slippingColor").getElementsByTagName("li");
    // 颜色库
    let arrayCorrugatedColor = [[0, 255, 98], [255, 0, 0], [255, 165, 0], [0, 191, 255]];
    for(let i = 0; i < slippingColor.length; i++) {
      slippingColor[i].onclick = function() {
        window.localStorage.setItem("corrugatedColor", arrayCorrugatedColor[i]);

        waterRipples(window.localStorage.getItem("corrugatedColor").split(","), window.localStorage.getItem("TransparencyValue")-0, true);
      }        
    }
/* ---------------------------------------------------------------------- */
}

categoryBox();
setSwitch();
setWaterWave();

export {
  headRolling
}